import React, {useState} from 'react'
import Calclist from './Calclist'

export default function Calc() {
    let [x, inputx] =useState(0)
    let [y, inputy] =useState(0)
    let [sum, cal] =useState(0)
    let [logs, log] = useState<String[]>([])
    let [hiden, showornot] = useState(false)

    function reset(){
      inputx(0)
      inputy(0)
      cal(0)
    }
    function calandlog(){
      cal(x+y)
      log([...logs, "time:  "+ formatDate(new Date())+`    callog:   ${x} + ${y} = ${x+y}`])
    }

    function formatDate(date: Date): string {
      const year = date.getFullYear().toString().padStart(4, '0'); // 获取年份并填充到4位，例如 "2023"
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 获取月份并填充到2位，例如 "04"
      const day = date.getDate().toString().padStart(2, '0'); // 获取日期并填充到2位，例如 "22"
      const hour = date.getHours().toString().padStart(2, '0'); // 获取小时并填充到2位，例如 "12"
      const minute = date.getMinutes().toString().padStart(2, '0'); // 获取分钟并填充到2位，例如 "30"
      const second = date.getSeconds().toString().padStart(2, '0'); // 获取秒数并填充到2位，例如 "15"
    
      return `${year}年${month}月${day}日${hour}:${minute}:${second}`;
    }
  return (
    <div className='calc'>
        <input value={x} onChange={(e) => inputx(Number(e.target.value))}/>
        <input value={y} onChange={(e) => inputy(Number(e.target.value))}/>
        <button onClick={() => calandlog()}>相加</button>
        <button onClick={() => reset()}>归零</button>
        <div>和：{sum}</div>
        <button onClick={()=> {showornot(!hiden)}}>{hiden ? "hide": "show"}</button>
        {hiden &&
        <Calclist logs={logs}  show={
          () => {
            showornot(false)
          }
        }></Calclist>
        }
        
    </div>
  )
}


// 需要用ts写一个简单的后端服务用于添加todo，删除，修改，获取，不需要使用第三方数据库，有什么方案

// 谷歌浏览器网页的所有表单不能输入中文

